<template>
  <div class="box-item">
    <div class="item-left">
      <div class="title-pa-box">
        <titles :title="props.info.text" />
      </div>
      <textMax :data="props.info.remarks" :maxLen="80" />
    </div>
    <div class="item-right">
      <t-row :gutter="20">
        <t-col :span="4">
          <div class="img-box">
            <img
              @click="pathChild(props.info.children[0])"
              :src="
                props.info.children[0].value
                  ? urls + props.info.children[0].value + '?imageView2/1/w/240/h/240/format/webp'
                  : 'http://101.34.143.36:8890/api/image/387939155165253/h_240,w_240'
              "
              alt=""
            />
            <img
              @click="pathChild(props.info.children[1])"
              class="img-style-1"
              :src="
                props.info.children[1].value
                  ? urls + props.info.children[1].value + '?imageView2/1/w/240/h/240/format/webp'
                  : 'http://101.34.143.36:8890/api/image/387939155165253/h_240,w_240'
              "
              alt=""
            />
          </div>
        </t-col>
        <t-col :span="4">
          <div class="img-box img-box-mg">
            <img
              @click="pathChild(props.info.children[2])"
              :src="
                props.info.children[2].value
                  ? urls + props.info.children[2].value + '?imageView2/1/w/240/h/240/format/webp'
                  : 'http://101.34.143.36:8890/api/image/387939155165253/h_240,w_240'
              "
              alt=""
            />
            <img
              @click="pathChild(props.info.children[3])"
              class="img-style-1"
              :src="
                props.info.children[3].value
                  ? urls + props.info.children[3].value + '?imageView2/1/w/240/h/240/format/webp'
                  : 'http://101.34.143.36:8890/api/image/387939155165253/h_240,w_240'
              "
              alt=""
            />
          </div>
        </t-col>
        <t-col :span="4">
          <div class="img-box">
            <img
              @click="pathChild(props.info.children[4])"
              :src="
                props.info.children[4].value
                  ? urls + props.info.children[4].value + '?imageView2/1/w/240/h/240/format/webp'
                  : 'http://101.34.143.36:8890/api/image/387939155165253/h_240,w_240'
              "
              alt=""
            />
            <img
              @click="pathChild(props.info.children[5])"
              class="img-style-1"
              :src="
                props.info.children[5].value
                  ? urls + props.info.children[5].value + '?imageView2/1/w/240/h/240/format/webp'
                  : 'http://101.34.143.36:8890/api/image/387939155165253/h_240,w_240'
              "
              alt=""
            />
          </div>
        </t-col>
      </t-row>
    </div>
    <div class="flot-box" :style="{ background: store.styleInfo.themeColor }">
      <span
        class="title"
        :style="{
          fontSize: store.styleInfo.mintitleSize,
          fontFamily: store.styleInfo.textFamily,
          color: store.styleInfo.fontColor,
        }"
        >{{ props.info.children[0].text }}</span
      >
      <span
        class="left-title"
        :style="{
          fontSize: store.styleInfo.contentSize,
          fontFamily: store.styleInfo.textFamily,
          color: store.styleInfo.fontColor,
        }"
        >{{ props.info.children[0].remarks }}</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { pathList, pathListLoop } from '../route';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import textMax from '@/components/textMax/textMax.vue';
import { handlemouse } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
});
const pathChild = (e: any) => {
  store.setchildModel(e);
  router.push({
    path: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { projectId: localStorage.getItem('projectId') },
  });
};
</script>

<style lang="less" scoped>
@import './index.less';
.box-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 820px;
}
.flot-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;

  top: 0;
  right: -130px;
  padding: 80px 130px;
  width: 510px;
  height: 820px;
  .title {
    position: relative;
    z-index: 99;
    text-align: left;
    padding: 0 0;
  }
  .left-title {
    position: relative;
    z-index: 99;
  }
}
.item-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 60px;
  flex: 1;
  margin-top: -70px;
  min-width: 300px;
}
.item-right {
  width: 780px;
  margin: 0;
}
.img-box {
  position: relative;
  z-index: 60;
  width: 100%;
  img {
    width: 100%;
    height: auto;
  }
}
.img-box-mg {
  margin-top: 160px;
}
.title-pa-box {
  margin-bottom: 60px;
}
</style>
